<template>
    <div class="person">
        <h2>名字:{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>
        <h2>地址:{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTow">查看手机号</button>
    </div>
</template>
<!-- 
    这里的name='Person01' 这样写在有一个插件的
    1.安装下载:yarn add vite-plugin-vue-setup-extend
    2.在vite.config.ts里面引入这个插件
    import VueSetupEntend from 'vite-plugin-vue-setup-extend'
    3.在
    plugins: [
        vue(),
        VueSetupExtend()
    ]
    中使用
-->
<script setup name="Person01" lang="ts">
    // 数据
    let name = '张三' // 注意此时的name不是响应式的
    let age = 18 // 注意此时的age不是响应式的
    let tel = '13800000000' // 注意此时的tel不是响应式的
    let address = '函数'
    // 方法
    function changeName(){
        name = 'zhang-san'// 这样修改的name页面没有修改
        console.log(name)// 数据确实修改了但页面没有修改
    }
    function changeAge(){
        age+=1
    }
    function showTow(){
        alert(tel)
    }
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>